<template>
	<div id="first">
		<div v-for="(value,index) in art" class="item">
			<div class="use_info">
				<span class="head">
					<img v-bind:src="value.headpath" class="head_img" alt="用户头像">
				</span>
				<span class="nickname">{{ value.nickname }}</span>
			</div>
			<div class="title">
				<h4>{{ value.title }}</h4>
				<i v-if="!value.show" @click="value.show=!value.show" class="el-icon-arrow-right"></i>
				<i v-else @click="value.show=!value.show" class="el-icon-arrow-down"></i>
			</div>
			<div  v-show="value.show" class="content" @click="enterArticle($event,value.nickname)">
				<span v-if="value.hasImg" class="img">
					img
				</span>
				<span class="summery">
					<mark>摘要 :</mark>
					{{ value.content }}
				</span>
			</div>
			<div class="agree">
				<i class="el-icon-edit" title="评论" @click="toArticleDetail($event,value.nickname)"></i>
				<i class="el-icon-share" title="分享"></i>
				<i class="el-icon-delete" title="从会话列表删除" @click="deletArt($event,index,value.nickname)"></i>
			</div>
		</div>
		
		
		
	</div>
</template>

<script>
	import axios from 'axios';
import pubsub from 'pubsub-js'
	export default{
		name:'MainFirstPage',
		data() {
			return{
				artHoverStyle:'',
				activeNames: ['1'],
				art:[
					{
						index:1,
						nickname:'u3',
						headpath:require('../../assets/icon/head.png'),
						title:'文学',
						hasImg:false,
						
						content:"文章内容1",
						
						show:false
					},
					{
						index:2,
						nickname:'u4',
						headpath:require('../../assets/icon/head.png'),
						title:'天文',
						hasImg:true,
						
						content:"文章内容2",
						
						show:false
					}
				]
			}
		},
		beforeMount() {
		    	axios({
					url:'http://127.0.0.1:5000/view/index',
					method:'get'
				}).then((response)=>{
					console.log(response);
					console.log('type');
					console.log(typeof this.art[0]);
					
					var articleList=response.data.articleList;
					console.log('------ articleList --------',articleList);
					console.log('------ articleList --------',articleList.length);
					for(var i=0;i<articleList.length;i++){
						let article=articleList[i];
						console.log('------aaaaaaa ---');
						console.log('------article ---',article);
						var newarticle={
							index:this.art.length,
							nickname:article.get('nickname'),
							headpath:require('../../assets/icon/head.png'),
							title:article.get('article').get('title'),
							hasImg:false,
							
							content:article.get('article').get('content'),
							
							show:false
						}
						console.log('------ newarticle  ---',newarticle);
						this.art.push(newarticle);
						
						console.log('------ bbbbbbbbb  ---');
					}
					
				}).catch((error)=>{
					
				})
		},
		methods: {
		    handleChange(val) {
		        console.log(val);
		    },
			enterArticle(event,nickname){
				this.$router.replace({
					name:'articledetail',
					params:{
						cnickname:nickname
					}
				})
			},
			toArticleDetail(event,nickname){
			    this.$router.replace({
			    	name:'articledetail',
					params:{
						cnickname:nickname
					}
			    })
			},
			deletArt($event,index,nickname){
				/* console.log('删除 ',index,'  ',nickname); */
				this.art.splice(index,1);
			}
		}
	}
</script>

<style scoped>
	#first{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		
		width: 60%;
		height: 98%;
		border: 0.7px solid gray;
		box-shadow: -2px -2px 0.5em gray;
		margin-top: 5px;
		
		overflow: auto;
	}
	.item{
		width: 95%;
		margin-top: 1.625rem;
		border: 1.7px solid rgb(235, 235, 235);
		border-radius: 5px 5px;
	}
	.use_info{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	
		height: 2.5rem;
	}
	.head{
		float: left;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50% 50%;
	}
	.nickname{
		float: left;
	}
	.head_img{
		width: 100%;
	}
	mark{
		background: none;
		font-size: 20px;
	}
	.title{
		position: relative;
		width: 100%;
		height: 40px;
	}
	.title i{
		position: absolute;
		top: 0.6875rem;
		right: 1.0625rem;
	}
	.content{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		
		width: 100%;
		border: 0.7px solid rgb(235, 235, 235);
		border-radius: 5px 5px;
	}
	.img{
		display: block;
		float: left;
		flex: 1;
		height: 100px;
		
		border: 0.7px solid red;
		border-radius: 5px 5px;
	}
	.summery{
		float: left;
		display: block;
		flex: 4;
		
		height: 100px;
		border: 0.7px solid rgb(235, 235, 235);
		border-radius: 5px 5px;

	}
	.agree{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		
		height: 40px;
		border-top: 0.125rem gray solid;
	}
	.agree i{
		font-size: 20px;
		margin-left: 1.25rem;
	}
</style>